<template>
	<div class="disinfectout">
		<back :title="title"></back>
	    <ordernumber v-show="isShow" @close="close" @chooseOrder="chooseOrder"></ordernumber>
	    <header class="header">
	   	<div class="chooseOrder" @click="order">{{placehold}}{{purchaseOrderSerial}}</div>
	   </header>	    
	    <body class="body">
	        <div class="productlist" v-for="item in productList">
	        	<div class="product">
	        		<div class="left">
	        			<img :src="item.thumbnail">
	        		</div>
	        		<div class="right">
	        			<p>{{item.productName}}</p>
	        			<p>消毒数量：{{item.productName}}</p>
	        			<p>出库数量：{[item.stockOutCount]}</p>
	        		</div>
	        	</div>
	        </div>
	    </body>
	   <footer class="footer" v-if="productList.length != 0">
	    	<div class="submit" @click="scan">扫描入库</div>
	    </footer>
	</div>
</template>

<script>
import back from '@/components/m-shop/m-store/back'
import ordernumber from '@/components/m-shop/m-store/outserial'
import wx from 'weixin-js-sdk'

  
export default {
	name:'disinfectout',
	components: {
		back,
		ordernumber
	  },
	data () {
		return {
			title:'消毒出库',
			isShow:false,
			placehold:'请选择订单号',
			purchaseOrderSerial:'',
			productList:[],
		}
	},
	created () {
	},
	mounted () {		
	},
	methods:{
		//调微信扫描
		scan () {	
			     //result = ""
				//这里【url参数一定是去参的本网址】
				//获取微信认证参数的地址
				//console.log(3)
				let _this = this;
				
				let url = location.href.split('#')[0];
				this.$http.get("http://www.ewj100.com/ewj/shop/wx/jsapi/createJsapiSignature?url="+url,{}).then(res => {
					wx.config({
						debug: false,
						// 必填，公众号的唯一标识               
						appId:res.data.appId,
						// 必填，生成签名的时间戳              
						timestamp: res.data.timestamp,
						// 必填，生成签名的随机串             
						nonceStr: res.data.nonceStr,
						// 必填，签名                
						signature: res.data.signature,
						// 必填，需要使用的JS接口列表，所有JS接口列表               
						jsApiList: ['checkJsApi', 'scanQRCode']
					});
			   })
				wx.error(function(res) {
					alert("出错了：" + res.errMsg);
					//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
				});
				wx.ready(function() {
					wx.checkJsApi({
						jsApiList: ['scanQRCode'],
						success: function(res) {}
					});
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，                   
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function(res) {
							   if(!!res.resultStr){
							   	 _this.$http.post(_this.$store.state.reqUrl + '/shops/disinfect/disinfectStockOutOne', {
									purchaseOrderSerial:_this.purchaseOrderSerial,
									productSerial:res.resultStr
								   }).then(res => {
									  _this.getProductList()
									  _this.$toast("已出库")										  
								    }).catch(res =>{
								 	   _this.$toast(res.response.data)	
								    })		
							   }
						 }
					});

				});
			},
			//选择订单号
		order () {
			this.isShow = true;
		},
		//获取参数
		chooseOrder (item) {
			this.purchaseOrderSerial = item;
			this.placehold = "";
		},
		//关闭模态框
		close (parame) {
			this.isShow = parame;
		},
		//根据订单号获取入库产品列表
		getProductList () {
			this.$http.get(this.$store.state.reqUrl + '/shops/disinfect/disinfect/'+this.purchaseOrderSerial , {
			}).then(res => {
			   	  this.productList = res.data;           
		    })		
		   }
		},
	watch:{
		//监听订单号
		purchaseOrderSerial () {
			this.getProductList()
		}
	}
}
</script>

<style lang="less" scoped>
    .disinfectout {
    	margin-top: 100px;
    	margin-bottom: 100px;
    	.header {
    		width:100%;
    		position: fixed;
    		top: 100px;
    		left: 0;
    		.chooseOrder {
    			width: 100%;
    			height: 80px;
    			text-align: center;
    			line-height: 80px;
    			font-size: 30px;
    			background: #FFFFFF;
    			margin-bottom: 10px;
    		}
    	}
    	.body{
    		background: none;
    		.productlist{
    			width:100%;
    			background: #FFFFFF;
    			border-bottom: 1px solid gainsboro;
    			.product{
    				padding:30px 20px;
    				display: flex;
    				.left{
    					width:120px;
    					height: 120px;
    					img{
    						height: 100%;
    						width: 100%;
    					}
    				}
    				.right{
    					flex: 1;
    					margin-left: 20px;
    				}
    			}
    		}
    	}
    	.footer {
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		height: 100px;
    		width: 100%;
    		background: #FFFFFF;
    		.submit {
    			width: 180px;
    			height: 60px;
    			line-height: 60px;
    			background: #F47920;
    			color: #FFFFFF;
    			font-size: 28px;
    			text-align: center;
    			float: right;
    			margin-right: 30px;
    			margin-top: 20px;
    			border-radius: 30px;
    		}
    	}
    }
</style>